<template>
    <div class="v-text" :id="id">
        <div :style="{ verticalAlign: element.style.verticalAlign, letterSpacing: element.style.letterSpacing + 'px'}">
            <pre style="white-space: pre-wrap; word-wrap: break-word;">{{ element.data.text }}</pre>
        </div>
    </div>
</template>

<script>
import register from '@/js/main/register.js';
import commonInterface from '@/js/element/commonInterface.js';
export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {};
    },
    created() {
        commonInterface.init(this);
        register.addComponent(this);
    },
    destroyed() {
        commonInterface.remove(this);
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.v-text {
    display: table;
    div {
        display: table-cell;
    }
}
</style>